<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!-- boostrap模态框的使用，是基于js事件属性 的，通过e。relatedTarget获得触发模态框的组件，此处为button，继而通过jquery方法获得相应的属性-->
<!DOCTYPE html>
<html>
<!-- base标签为页面上的所有链接规定默认地址或默认目标 -->
<base href="<%=basePath%>">
<meta charset="UTF-8">
<!-- 链接外部css文件 -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/collection.css">
<link rel="stylesheet" href="css/jquery-confirm.min.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/bootstrap.js"></script>
<!-- <script src="js/bootstrap-paginator.js"></script> -->
<script src="js/collection.js"></script>
<script src="js/header.js"></script>
<script src="js/jquery-confirm.min.js"></script>
 <script src="js/bootstrap-confirmation.js"></script>  
</head>
<body>
	<jsp:include page="common/header.jsp"></jsp:include>
	<!--附加导航栏-->
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-3" style="">
				<a href="#" style="padding: 0 21%" class=""><img
					src="images/PETCLUB2.png" alt=""></a>
			</div>
			<div class="col-md-9" style="">
				<!-- <div class="form-group" style="position: absolute;top:50%;transform:translateY(-50%); ">
                             <input class="search" type="text" list="list" name="search" title="I am looking for..."
                                    value="I am looking for... " style="width: 350px">
                             <input type="submit" name="submit">
                         </div>-->
				<div class="input-group" style="width: 60%; padding: 1.2%">
					<input class="form-control searchInput" type="text" list="list"
						placeholder="I am looking for..."> <span
						class="input-group-btn">
						<button class="btn btn-default searchBtn" type="submit">
							<i class="glyphicon glyphicon-search"></i>
						</button>
					</span>
				</div>
				<datalist id="list">
					<option>宠物猫</option>
					<option>宠物狗</option>
				</datalist>
			</div>
		</div>
	</div>
	</div>
	<div class="container">
		<div class="panel panel-default">
			<div class="panel-heading">
				<p>
					<i class="glyphicon glyphicon-gift"></i>全部收藏
				</p>
			</div>

			<div class="panel-body">
				<div class="row">
						<div class="well col-md-12" style="background: white">
							<c:forEach items="${collectionList}" var="item" varStatus="status">
								<c:if test="${status.index==0}">
											<div class="col-md-12" style="border-bottom: 2px solid gainsboro">
								</c:if>
								<c:if test="${status.index!=0&&(status.index)%6==0 }">
									</div>
									<div class='col-md-12' style="border-bottom: 2px solid gainsboro">
								</c:if>
								<dl class="col-md-2">
									<div style="padding-left: 0;">
										<dt style="padding-top: 0%;">
										<!-- data-href="http://localhost:8080/" data-toggle="modal" data-target="#confirm-delete" -->
											<span> <a class=" cDeleteBtn glyphicon glyphicon-remove"
												id='http://localhost:8080/distribute-portal/collection/rest/delete/${item.id}.html' data-toggle="modal" data-target="#confirm-delete"
												style="text-decoration: none" 
												"></a> <a class="thumbnail" href='http://localhost:8080/distribute-portal/item/${item.id}.html'><img
												src="${item.image }" alt=""
												style=""></a></span>
										</dt>
										<dd>名字：${item.name}</dd>
										<dd>标题：${item.title}</dd>
									</div>
								</dl>
							</c:forEach>


							<div class="col-md-8 col-md-offset-4">
								<ul id='bp-element'></ul>
								<!--   <ul class="pagination pagination-md ">
                                    <li><a href="#">&laquo;</a></li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">6</a></li>
                                    <li><a href="#">&raquo;</a></li>
                                </ul> -->
							</div>
						</div>

					</div>
				</div>
			</div>
			<div class="panel-footer"></div>
		</div>
	</div>
	</div>
	 <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
		<div class="modal-content">
		<div class="modal-header">
		请确认
		</div>
		<div class="modal-body">
		确认删除该记录吗？
		</div>
		<div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		<a class="btn btn-danger btn-ok">删除记录</a>
		</div>
		</div>
		</div>
		</div>
</body>
<script type="text/javascript">
	$(function() {
		 $('#confirm-delete').on('show.bs.modal', function(e) {
			 var href = $(e.relatedTarget).attr("id");
			/*  alert(href); */
			$(this).find('.btn-ok').click(function () {
				$.ajax({
					url:href,
					success:function(data){
						if(data=="success"){
							window.location.reload();
						}else{
							alert("操作失败！");
						}
					}
				});
			});
			}); 
		
		
		//分页插件$(e.relatedTarget).data('href')
		/* var element = $('#bp-element');
		options = {
			bootstrapMajorVersion : 3, //对应的bootstrap版本
			currentPage : '${page }', //当前页数，这里是用的EL表达式，获取从后台传过来的值
			numberOfPages : 10, //每页页数
			totalPages : '${totalPages }', //总页数，这里是用的EL表达式，获取从后台传过来的值
			shouldShowPage : true,//是否显示该按钮
			itemTexts : function(type, page, current) {//设置显示的样式，默认是箭头
				switch (type) {
				case "first":
					return "首页";
				case "prev":
					return "上一页";
				case "next":
					return "下一页";
				case "last":
					return "末页";
				case "page":
					return page;
				}
			},
			//点击事件
			onPageClicked : function(event, originalEvent, type, page) {
				location.href = "item?q=" + "${query}&page=" + page;
			}
		};
		element.bootstrapPaginator(options); */

		//删除收藏按钮点击
		/* $(".cDeleteBtn").click(function() {
			alert("d in");
			var href = $(this).attr("id");
			alert("d in href:"+href);  */
		/*   $('.cDeleteBtn').confirmation({  
	            animation: true,  
	            placement: "top",  
	            title: "确定要删除吗？",  
	            btnOkLabel: '确定',  
	            btnCancelLabel: '取消',  
	            onConfirm: function () {  
	                alert("点击了确定");  
	            },  
	            onCancel: function () {   
	                alert("点击了取消");   
	  
	            }  
	        });   */
	        /*  $.confirm({
			    title: 'Confirm!',
			    content: 'Simple confirm!',
			  confirm: function(){
			    	console.log('the user clicked confirm');
			       alert('Confirmed!');
			    },
			    cancel: function(){
			    	console.log('the user clicked rm');
			        alert('Canceled!')
			    } 
			 }); 
		 });*/ 
 
	});
</script>
</html>